<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}" src="/js/jquery-2.1.4.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo{width:700px; margin:40px auto 0 auto; min-height:450px;}
        @media screen and (max-width: 360px) {.demo {width:340px}}

        .front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0;	color: #666;text-align: center;padding: 3px;border-radius: 5px;}
        .booking-details {float: right;position: relative;width:200px;height: 450px; }
        .booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;}
        .booking-details p{line-height:26px; font-size:16px; color:#999}
        .booking-details p span{color:#666}
        div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;}
        div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
        div.seatCharts-row {height: 35px;}
        div.seatCharts-seat.available {background-color: #B9DEA0;}
        div.seatCharts-seat.focused {background-color: #76B474;border: none;}
        div.seatCharts-seat.selected {background-color: #E6CAC4;}
        div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;}
        div.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;}
        div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;}
        ul.seatCharts-legendList {padding-left: 0px;}
        .seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;}
        span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;}
        .checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer}
        #selected-seats {max-height: 150px;overflow-y: auto;width: 200px;}
        #selected-seats li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}

        .unavailable1 {background-color: #5e5e5e;cursor: not-allowed;}
    </style>
</head>
<body>
    <div class="box" style="margin-left: 200px;margin-top: 50px">
        总座位数<span id="totals">0</span>&nbsp;&nbsp;生成座位数<span id="createNum">0</span>
        &nbsp;&nbsp;档次座位数<span id="leaveSiteNum">-1</span> &nbsp;&nbsp;已选择<span id="counter">0</span><br/>
        设置行数<input id="x">
        设置列数<input id="y"><br>
        <!--档次:<span id="leaveSpan"></span>-->
        档次:<select id="addid" onchange="setLeaveCount()"></select>
        <div class="front">舞台</div>
        <div id="seat-map"></div>
        <button onclick="createArr(this)" id="btn1">生成座位</button>
        <button onclick="deleteSite()" id="btn2" class="unavailable1">删除座位</button>
        <button onclick="setLeave()" id="btn3" class="unavailable1">设置档次</button>
        <button onclick="saveSite()" id="btn4" class="unavailable1">提交座位</button>
        <button onclick="backPage()" id="btn5">返回</button>
    </div>
</body>
<script>
    //获取场次
    var sessionId = [[${sessionId}]]
    //获取总座位数
    var count = [[${count}]]
    console.log(count)
    $("#totals").html(count)
    //创建数组
    var arr=[];
    var x=0;
    var y=0;
    function createArr(thisBtn) {
        var b=[];
        var c=[0,-1];
        x = $("#x").val()
        y = $("#y").val()
        if (x * y < count) {
            alert("座位数不够")
            location.reload();
        }
        //生成数组
        for (var i = 0; i < x; i++) {
            var arrs = new Array(x);
            for (var j = 0; j < y; j++) {
                arrs[j]=new Array(y);
                arrs[j]=[0,-1];
            }
            arr.push(arrs);
        }
        var aaa = JSON.stringify(arr)
        var bbb = JSON.parse(aaa);
        console.log(arr);
        console.log(bbb);
        //创建座位
        createSite();
        $("#createNum").html(x*y);
        //改变按钮状态
        $(thisBtn).addClass("unavailable1");
        $("#btn2").removeClass("unavailable1");
    }
    //创建座位
    function createSite(){
        var str="";
        var styl='';
        for(var i=0;i<arr.length;i++){
            str+="<div class='seatCharts-row'>";
            str+="<div class='seatCharts-cell seatCharts-space'>"+i+"</div>";
            for(var j=0;j<arr[i].length;j++){
                //判断是否为不可选座位
                if(arr[i][j][1]==0){
                    clas="seatCharts-cell seatCharts-space";
                }else{
                    //判断是否设置了档次
                    console.log(arr[i][j][1]!=-1&&arr[i][j][1]!=0)
                    if(arr[i][j][1]!=-1&&arr[i][j][1]!=0){
                        clas="seatCharts-seat seatCharts-cell unavailable";
                        styl="style='background-color:grey'";
                    }else{
                        styl='';
                        //判断座位是否被选
                        if(arr[i][j][0]==0){
                            clas="seatCharts-seat seatCharts-cell available";
                        }else {
                            clas="seatCharts-seat seatCharts-cell unavailable";
                        }
                    }
                }
                str+="<div id=\""+i+"_"+j+"\" role=\"checkbox\" tabindex=\"-1\" class=\""+clas+"\" "+styl+" data-x='"+i+"' data-y='"+j+"'>"+arr[i][j][1]+"</div>"
            }
            str+="</div>";
        }
        $("#seat-map").html(str);
    }
    //选座位
    var siteNum=0;
    $(document).on("click",".available",function (){
        $("#counter").html(++siteNum);
        $(this).removeClass("available");
        $(this).addClass("selected")
        var xx = $(this).data("x");
        var yy = $(this).data("y");
        var iid = $(this).attr("id");
        //map.set(iid,[x,y])
        //alert(strr);
        $('#counter').text(siteNum);
        // alert(siteNum+"+"+price);
    });
    //取消选择
    $(document).on("click",".selected",function (){
        $(this).removeClass("selected");
        $(this).addClass("available")
        var xx = $(this).data("x");
        var yy = $(this).data("y");
        var iid = $(this).attr("id");
        //map.delete(iid);
        //arrs[x][y][0]=0;
        siteNum--;
        //更新数量
        $("#counter").html(siteNum);

        //更新总计
        //$('#total').text(siteNum*price);

        //删除已预订座位
       // $('#cart-item-'+iid).remove();
    });

    //删除座位
    function deleteSite(){
        if(((x*y)-siteNum)!=count){
            //alert("剩余座位不足");
            alert("删除数量不正确");
            console.log(arr);
            return;
        }else {
            //获取选中座位
            $(".selected").each(function (){
                var xx = $(this).data("x");
                var yy = $(this).data("y");
                arr[xx][yy][1]=0;
            })
            siteNum=0;
            $("#counter").html(siteNum);
            console.log(arr);
        }
        createSite();
        $("#btn2").addClass("unavailable1");
        //改变档次按钮状态
        $("#btn3").removeClass("unavailable1");
    }
    //查询档次
    $.ajax({
        url:"/goodsConsummer/getLeaveSelect",
        data:{id:sessionId},
        success:function(data){
            var str="";
            str+="<option title='-1' value='-1'>请选择</option>";
            for (var i = 0; i < data.length; i++) {
                str+="<option title='"+data[i].goodsCount+"' value='"+data[i].leaveId+"'>"+data[i].leaveName+",票数"+data[i].goodsCount+"</option>"
            }
            //	alert(str);
            //	alert(data.length);
            $("#addid").append(str);
            $("#addid").selectpicker("refresh");
        }
    })
    //页面档次数量赋值
    function setLeaveCount(){
        var leaveNum = $("option:selected").attr("title");
        $("#leaveSiteNum").html(leaveNum);
    }
    //设置档次
    function setLeave(){
        //当前选中档次id
        var leaveId = $("#addid").val();
       // alert(leaveId)
        //判断选中座位数是否等于档次数
        var leaveNum = $("option:selected").attr("title");
        if (siteNum==leaveNum||leaveNum==-1){
            $(".selected").each(function (){
                var xx = $(this).data("x");
                var yy = $(this).data("y");
                arr[xx][yy][1]=leaveId;
                console.log(arr);
                //设置切换档次
                $("option:selected").attr("disabled",true);
                $("option[value='-1']").attr('selected',true);
            })
        }else {
            alert("选择数量不对")
            console.log(arr);
            return;
        }
        createSite();
        siteNum=0;
        $("#counter").html(siteNum);
        //判断是否改完
        var aa=0;
        $(".available").each(function (){
            aa++;
        })
        alert(aa);
        if(aa==0){
            //改变按钮状态
            $("#btn3").addClass("unavailable1")
            $("#btn4").removeClass("unavailable1")
        }
    }
    //提交座位
    function saveSite(){
        //数组转字符串
        var jsonarr = JSON.stringify(arr);
        $.ajax({
            url:"/goodsConsummer/saveSite",
            data:{siteInfo:jsonarr,sessionId:sessionId,goodsTicketsVendibilityCount:count},
            success:function(){
                location.href="/jumpPage/jumpPage?page=siteManage"
            }
        })
    }
    //返回
    function backPage(){
        location.href="/jumpPage/jumpPage?page=siteManage";
    }
</script>
</html>